<template>
    <Search></Search>

    <van-tree-select v-model:main-active-index="activeIndex" :height=789 :items="items" @click-nav="positioning">
        <template #content>
            <ClassifyList :items="items" :activeIndex="activeIndex" />
        </template>
    </van-tree-select>
</template>
 
<script lang="ts" setup>
import Search from '../search'
import { ref, onMounted } from 'vue';
import ClassifyList from '@/components/classify/classifyList/index.vue'
// import type { groupsModel } from '@/api/index';
import { getClassify } from '@/api/index'
const activeIndex = ref(0);
const items = ref<any>([])
const positioning = (id: number) => {
    document.getElementById(id + '')?.scrollIntoView({
        block: 'start',
        inline: 'nearest',
        behavior: 'smooth'
    })
}
//  页面所需数据
onMounted(async () => {
    try {
        let result = await getClassify()
        result.data.groups.forEach((item) => {
            items.value.push({
                text: item.name,
                ...item
            })
        })
    } catch (error) {
        console.error(error)
    }
})
</script>
<style lang="less">
.van-tree-select {
    margin-top: 5px;
    width: 390px;

    .van-sidebar {
        background-color: #fff;

        .van-tree-select__nav-item {
            height: 50px;
            color: #72727b;
            padding: 15px 0;
            font-size: 14px;
            text-align: center;
            background-color: #fff;
            // border-bottom: 1px solid rgb(215, 215, 215);
        }

        .van-sidebar-item--select:before {
            position: absolute;
            width: 5px;
            height: 50px;
            top: 25px;
            left: 0;
            background-color: #f86442;
        }
    }
}
</style>
 